<template>
  <div class="">
		<p class="txt1">请操作您需要的链接</p>
		<div class="page_container">
			<div class="icon_item" v-if="urlLinks.h5_url">
				<img class="link_img" src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/share/link1.png" alt="">
				<div class="btn_item">
					<div class="line1">
						<p class="title">商城链接</p>
						<div @click="doCopy(urlLinks.h5_url)">
							<span class="copytxt">复制</span>
							<img class="copyimg" src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/share/copy.png" alt="">
						</div>
					</div>
					<p class="txt2">会员点开链接后直接访问商城</p>
				</div>
			</div>
			<div class="icon_item">
				<img class="link_img" src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/share/link2.png" alt="">
				<div class="btn_item">
					<div class="line1">
						<p class="title">小程序短链</p>
						<div @click="doCopy(urlLinks.short_link)">
							<span class="copytxt">复制</span>
							<img class="copyimg" src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/share/copy.png" alt="">
						</div>
					</div>
					<p class="txt2">您想在微信朋友圈/视频号/微信群在微信内分享</p>
				</div>
			</div>
			<div class="icon_item">
				<img class="link_img" src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/share/link3.png" alt="">
				<div class="btn_item">
					<div class="line1">
						<p class="title">小程序link</p>
						<div @click="doCopy(urlLinks.short_h5_scheme)">
							<span class="copytxt">复制</span>
							<img class="copyimg" src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/share/copy.png" alt="">
						</div>
					</div>
					<p class="txt2">您想在抖音/快手/微博等第三方进行分享</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
/* eslint-disable */
import { getUrlLinks } from '@/api/user/share/shareApi'

export default {
	data() {
		return {
			type: 1,
			object_id: '',
			urlLinks: {
				id: '',
				h5_url: '',
				short_link: '',
				short_h5_scheme: '',
			}
		}
	},
	created() {
		this.linktype = this.$route.query.linktype
		this.object_id = this.$route.query.id || ''
		// pid可以不用传，上级就是uid
    this.init()
  },
	methods: {
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      this.onLoad()
    },
    onLoad() {
      const data = {
				type: this.linktype,
				object_id: this.object_id,
      }
      getUrlLinks(data).then(res => {
        // this.loading = false
        this.$loadingWrap.close()
          if (res.status == 1) {
						this.urlLinks = res.data
          } else {
            this.$Error(res.msg)
          }
      })
    },
		doCopy(text) {
			wx.setClipboardData({
				data: text,
				success (res) {
					wx.getClipboardData({
						success(res) {
							wx.showToast({
								title: '复制成功',
								icon: 'none',
							});
						}
					})
				}
			})
		}
	}
}
</script>
<style lang="scss">
.page_container {
	box-sizing: border-box;
	padding: 0 16px;
	.icon_item {
		width: 100%;
		height: 144px;
		background: rgba(255,255,255,1);
		border-radius: 16px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding: 0 24px;
		margin-bottom: 16px;
		.link_img {
			width: 80px;
			height: 80px;
			flex-shrink: 0;
			margin-right: 24px;
		}
		.btn_item {
			width: 0;
			flex: 1;
			.txt2 {
				color: #999;
				font-size: 24px;
				margin-top: 16px;
			}
			.line1 {
				display: flex;
				justify-content: space-between;
				.title {
					font-size: 32px;
					font-weight: 500;
					color: rgba(51,51,51,1);
				}
				.copytxt {
					font-size: 28px;
					color: rgba(255,2,0,1);
				}
				.copyimg {
					width: 32px;
					height: 32px;
					margin-left: 8px;
				}
			}
		}
	}
}
.txt1 {
	padding-left: 20px;
	color: #333;
	font-size: 32px;
	font-weight: 500;
	padding-bottom: 30px;
	padding-top: 30px;
}
.icon_box {
	color: #fff;
	font-size: 36px;
	font-weight: 500;
	width: 100%;
	box-sizing: border-box;
	padding: 0 16px;
	display: flex;
	justify-content: space-around;
	.btn_item {
		width: 338px;
		height: 90px;
		background: rgba(255,0,0,1);
		border-radius: 45px;
		display: flex;
		justify-content: center;
		align-items: center;
		img {
			width: 48px;
			margin-right: 13px;
		}
	}
}
</style>
